import React, { useEffect, useRef, useState } from 'react';
import { Divider, Typography } from 'antd';
import { ArticleType } from '@/domains/article';
import Markdown, { MarkdownProps } from '@/components/Markdown';
import Richtext, { RichtextProps } from '@/components/Richtext';

const { Title, Paragraph, Text } = Typography;

interface Props {
  data: ArticleType;
}

const Article: React.FC<Props> = ({ data }) => {
  const markdown = useRef({} as MarkdownProps);
  const richtext = useRef({} as RichtextProps);
  const [isMarkdown] = useState(data.isMarkdown);

  useEffect(() => {
    (isMarkdown ? markdown : richtext).current.setContents(data.contents);
  }, []);

  return (
    <>
      <Title level={2}>{data.title}</Title>
      <Paragraph>{data.summary}</Paragraph>
      <Paragraph>
        <Text type="secondary">最后发布于&nbsp;{data.time}</Text>
        <Divider type="vertical" />
        {data.tags.map(tag => (
          <Text key={tag} code>
            {tag}
          </Text>
        ))}
      </Paragraph>
      <Divider />
      {isMarkdown ? <Markdown ref={markdown} /> : <Richtext ref={richtext} readOnly />}
    </>
  );
};

export default Article;
